<template>
  <div class="address">
    <div class="header">
      <div class="left"></div>
      <div class="right">地址管理</div>
    </div>

    <div class="content">
      <div class="tab">
        <div
          class="tab-item"
          @click="change(index)"
          v-for="(item, index) in tabList"
          :key="index"
          :class="[selectIndex === index ? 'tabActive' : '']"
        >
          {{ item }}
        </div>
      </div>

      <div class="content-operate">
        <el-button class="add-adress" @click="edit(1)">{{ btnName }}</el-button>
        <span>您已经创建了3个{{ btnName }}</span>
      </div>

      <Table
        :tableData="tableData"
        :tableColumn="tableColumn"
        :tableCellWidth="tableCellWidth"
        :tableCellAlign="tableCellAlign"
        :tableShowTooltip="tableShowTooltip"
        :tableEdit="tableEdit"
        :tableShowPagination="tableShowPagination"
        :paginationObj="paginationObj"
        :tableIsShowSerial="false"
      ></Table>

      <EditAddress ref="editAddress"></EditAddress>

      <DialogMessage :message="message" :isShowDialog="isShowDialog" @confirm="confirm"></DialogMessage>

      <!-- <el-button class="add-role" @click="edit(1)">新增角色</el-button> -->
    </div>
  </div>
</template>

<script>
import Table from "@/components/ability-components/table.vue";
import EditAddress from "./components/EditAddress.vue";
import DialogMessage from './components/DialogMessage.vue'
import * as takeGoodsTable from "./data/takeGoodsTable";
import * as billTable from "./data/billTable";
export default {
  components: {
    Table,
    EditAddress,
    DialogMessage
  },
  data() {
    return {
      tabList: ["收货地址", "收票地址"],
      selectIndex: 0,
      btnName: "新增收货地址",
      tableMap: new Map([
        [0, takeGoodsTable],
        [1, billTable],
      ]),
      isShowDialog:false,
      message:'',
      messageMap:new Map([
        [1, '请确认删除该地址'],
        [2, '请确认设置当前地址为默认地址吗？'],
      ]),
      paginationObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableShowPagination: true,
      tableEdit: {
        isShowEdit: true,
        align: "center",
        tableEditArr: [
          {
            icon: "",
            text: "编辑",
            type: "text",
            cb: ({ row }) => {
              // 做逻辑处理
              this.$refs.editAddress.open(this.selectIndex,2,row);
              console.log(row);
            },
          },
          {
            icon: "",
            text: "删除",
            type: "text",
            cb: ({ row }) => {
              // 做逻辑处理
              this.isShowDialog=true;
              this.message="请确认删除该地址";
              
              console.log(row);
            },
          },
          {
            icon: "",
            text: "设为默认",
            type: "text",
            cb: ({ row }) => {
              // 做逻辑处理
              this.isShowDialog=true;
              this.message="请确认设置当前地址为默认地址吗？";
              console.log(row);
            },
          },
        ],
      },
      tableShowTooltip: [],
      tableCellAlign: [],
      tableCellWidth: [],
      tableColumn: [],
      tableData: [],
    };
  },
  created() {
    console.log(takeGoodsTable, "takeGoodsTable=========");
    // this.tableData = takeGoodsTable.tableData;
    // this.tableShowTooltip=takeGoodsTable.tableShowTooltip;
    // this.tableCellAlign=takeGoodsTable.tableCellAlign;
    // this.tableCellWidth=takeGoodsTable.tableCellWidth;
    // this.tableColumn=takeGoodsTable.tableColumn;
     this.handleTable();
  },
  methods: {
    confirm(type){
      this.isShowDialog=false;
    },
    edit(type){
       this.$refs.editAddress.open(this.selectIndex,type);
    },
    handleTable() {
      this.tableData = this.tableMap.get(this.selectIndex).tableData;
      this.tableShowTooltip = this.tableMap.get(
        this.selectIndex
      ).tableShowTooltip;
      this.tableCellAlign = this.tableMap.get(this.selectIndex).tableCellAlign;
      this.tableCellWidth = this.tableMap.get(this.selectIndex).tableCellWidth;
      this.tableColumn = this.tableMap.get(this.selectIndex).tableColumn;
    },
    change(index) {
      this.selectIndex = index;
      this.btnName = index == 1 ? "新增收票地址" : "新增收货地址";
      this.handleTable();
    },
  },
};
</script>

<style  lang="scss" scoped>
.address {
  width: 95%;
  margin: 0 auto;
  height: calc(100vh - 100px);
  // background-color: pink;
  .header {
    display: flex;
    .left {
      background-color: #442a8d;
      width: 5px;
      height: 20px;
      margin-right: 5px;
    }
    .right {
      font-weight: 650;
      color: #666666;
      font-size: 16px;
    }
  }

  .content {
    background-color: #ffffff;
    height: 95%;
    border-radius: 5px;
    // background-color: pink;
    // box-shadow: 0px 0px 1px rgba(0,0,0,0.1),0px 0px 3px rgba(0,0,0,0.1) inset;
    .content-operate {
      .add-adress {
        margin: 20px 10px;
        background-color: #442a8d;
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #ffffff;
        width: 120px;
      }
      span {
        font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgb(204, 204, 204);
        font-size: 13px;
      }
    }

    .tab {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e4e7ed;
      .tab-item {
        height: 50px;
        line-height: 50px;
        width: 180px;
        text-align: center;
        font-size: 13px;
        letter-spacing: normal;
        color: #333333;
        font-family: 微软雅黑, sans-serif;
        font-weight: 400;
        font-style: normal;
        cursor: pointer;
      }
      .tabActive {
        color: rgb(68, 42, 141);
        border-bottom: 2px solid rgb(68, 42, 141);
      }
      // width: 180px;
    }
  }
}
</style>